<template>
  <div style="height: 735px; width: 100%" class="flex-row-center-center">
    <div class="flex-row-center-center" style="width: 41.08%">
      <div style="width: 100%">
        <div class="add-data-title flex-row-center-center">
          检测事件数据新增
        </div>
        <div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">库区编号</div>
            <Input
              class="add-data-unit-value"
              size="large"
              v-model="kqId"
              @on-blur="updateJcEventId"
            />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">井组编号</div>
            <Input
              class="add-data-unit-value"
              size="large"
              v-model="jzId"
              @on-blur="updateJcEventId"
            />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">检测类型</div>
            <Select v-model="jcType" class="add-data-unit-value">
              <Option v-for="item in jcTypeList" :key="item" :value="item">{{
                item
              }}</Option>
            </Select>
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">检测点/井筒编号</div>
            <Input
              class="add-data-unit-value"
              size="large"
              v-model="jcdId"
              @on-blur="updateJcEventId"
            />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">检测点坐标</div>
            <Input class="add-data-unit-value" size="large" v-model="jcPoint" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">检测示踪剂类型</div>
            <Input class="add-data-unit-value" size="large" v-model="szjType" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">检测数值</div>
            <Input class="add-data-unit-value" size="large" v-model="jcValue" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title">检测时间</div>
            <Input class="add-data-unit-value" size="large" v-model="jcTime" />
          </div>
          <div class="flex-row-start-center" style="margin-top: 37px">
            <div class="add-data-unit-title"></div>
            <Button class="add-data-button" @click="addData">新增</Button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id: 1,
      jcTime: "",
      jcValue: "",
      szjType: "",
      kqId: "",
      jzId: "",
      jcType: "",
      jcEventId: "",
      jcPoint: "",
      jcTypeList: ["井筒", "检测点", "库内气体", "井口"],
      jcdxPoint: "",
      jcdyPoint: "",
      jcdId: "",
    };
  },
  computed: {
    curDate() {
      return this.$store.state.curDate;
    },
  },
  watch: {
    jcType() {
      this.updateJcEventId();
    },
  },
  props: {
    jcEventList: Array,
  },
  methods: {
    changeUpdateTime(val) {
      this.jcTime = val;
    },
    addData() {
      let arr = [];
      let jcXpoint = "";
      let jcYpoint = "";
      if (this.jcEventId != "") {
        if (
          this.jcPoint.toString() != "" &&
          this.jcPoint.toString().indexOf("(") > -1 &&
          this.jcPoint.toString().indexOf(")") > -1
        ) {
          let start = this.jcPoint.toString().indexOf("(");
          let end = this.jcPoint.toString().indexOf(")");
          let item = this.jcPoint.toString().substring(start + 1, end);

          arr = item.toString().split(",");
          jcXpoint = arr[0];
          jcYpoint = arr[1];
        }
        let param = {};
        param.kqId = this.kqId;
        param.jzId = this.jzId;
        param.jcEventId = this.jcEventId;
        param.jcdId = this.jcdId
        param.jcValue = this.jcValue;
        param.jcXpoint = jcXpoint;
        param.jcYpoint = jcYpoint;
        param.jcType = this.jcType;
        param.szjType = this.szjType
        param.updateTime = this.jcTime;
        this.$axios({
          url: "/addOneJcEventInfo",
          type: "post",
          params: param,
        })
          .then((res) => {
            alert("添加成功");
            this.kqId = "";
            this.jzId = "";
            this.jcEventId = "";
            this.jcValue = "";
            this.jcPoint = "";
            this.jcTime = "";
            this.jcType = "";
            this.jcdId = ""
            this.id++;
          })
          .catch((error) => {});
      } else {
        alert("检测点/井筒编号不能为空");
      }
    },
    updateJcEventId() {
      let it = this;
      if (this.jcType != "" && this.jcType != undefined) {
        if (this.jzId != "" && this.kqId != "") {
          if (this.id == 0) {
            let temp = this.jcEventList.filter((item) => {
              return item.jzId == it.jzId && item.jcType == it.jcType;
            });
            if (temp.length > 0) {
              this.id = temp.length + 1;
            } else {
              this.id = 1;
            }
          }
          let ids;
          this.jcTime = this.curDate;
          if (this.id < 10) {
            ids = "0" + this.id;
          } else {
            ids = this.id;
          }

          let timeArr = this.jcTime.split("-");
          let time = timeArr[0] + timeArr[1] + timeArr[2];
          if (this.jcType == "检测点") {
            this.jcEventId = time + this.jzId + ids;
           
          } else if (this.jcType == "井筒") {
            this.jcEventId = time + this.jzId + "00";
           
          } else if (this.jcType == "库内气体") {
            this.jcEventId = time + this.jzId;
            
          } else if(this.jcType == '井口'){
            this.jcEventId = time + this.jzId +"0"
          }
        }
        this.jcValue = "0";
        
      }
    },
  },
};
</script>
<style scoped>
.test-style {
  color: black;
  font-size: 18px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  width: calc(15.6% - 20px);
  margin-left: 10px;
  margin-right: 10px;
}
.add-data-title {
  height: 92px;
  background-color: rgba(204, 0, 0, 0.12);
  color: black;
  font-size: 36px;
  text-align: center;
  font-family: Roboto;
}
.add-data-unit-title {
  width: 30%;
  color: black;
  font-size: 20px;
  text-align: center;
  font-family: Roboto;
}
.add-data-unit-value {
  width: 70%;
  height: 34px;
}
.add-data-button {
  width: 170px;
  height: 47px;
  border-radius: 4px;
  background-color: #f1f1f1;
  color: black;
  font-size: 20px;
  text-align: center;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(187, 187, 187, 1);
}
</style>